/**
 * 1.生成表单配置文件
 * 2.创建表单构造函数
 *    2.1 通过findElement找到字段所对应的输入框DOM元素
 *    2.2 通过genValiRes生成验证结果
 *    2.3 同过bindEvent给每个输入框绑定事件
 *      2.3.1 使用ctx指向form实例
 *      2.3.2拿到输入框元素
 *      2.3.3给元素添加change事件
 *      2.3.4 获取元素的值，获取字段对应的正则对象
 *      2.3.5 通过正则对象验证输入框的值是否符合规范
 *    2.4 添加ispass方法，验证整个表单是否通过，通过返回true，否则返回false
 * 3.找到提交按钮，并给提交按钮绑定click事件，如果表单验证不成功则阻止表单提交
 */

//表单配置文件
/*
const formOpt = {
    //字段名：选择器
    username: "#username",
    password: "#pwd",
    passwordRep: "#repPwd",
    email:"#email"
}
//字段验证的正则对象
const fieldReg = {
    username: /^[A-Za-z]\w{2}/,
    password: /.{6,20}/,
    passwordRep: /.{6,20}/,
    email:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
}
*/

const formOpt = {
    fields: {
        username: {
            selector: "#username",
            reg: /^[A-Za-z]\w{2}/,
            errMsg: "用户名格式错误"
        },
        password: {
            selector: "#pwd",
            reg: /.{6,20}/,
            errMsg: "密码格式错误"
        },
        passwordRep: {
            selector: "#repPwd",
            reg: /.{6,20}/,
        },
        email: {
            selector: "#email",
            reg: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
        }
    }
}

function Form(formOpt) {
    const ctx = this
    this.formOpt = formOpt
    //调用findElement，根据配置文件找到对应的元素并挂在到this.elements上
    this.elements = findElement()
    this.valiRes = genValiRes()
    // bindEvent.bind(this)()
    // bindEvent.call(this)
    // bindEvent.apply(this)
    bindEvent()
    this.errMsg = {}

    /**
     * 寻找字段对应的元素
     * @param {Object} formOpt 
     */
    function findElement() {
        const elements = {}
        const fields = ctx.formOpt.fields
        //循环formOpt的键
        for (let key in fields) {
            //拿到字段对应的选择器，字符串
            const selector = fields[key].selector
            //根据选择器找到对应的元素，并添加给elements对象
            elements[key] = document.querySelector(selector)
        }
        console.log(elements)
        return elements
    }
    /**
     * 根据字段生成表单验证结果
     * @param {Object}} formOpt 
     */
    function genValiRes() {
        const valiRes = {}
        for (let key in ctx.formOpt.fields) {
            valiRes[key] = false
        }
        return valiRes
    }
    /**
     * 给所有输入框绑定一个change事件
     */
    function bindEvent() {
        // console.log(ctx)
        // console.log("---------")
        // console.log(this)
        const elements = ctx.elements
        // console.log(elements)
        for (let key in elements) {
            //拿到字段对应的元素
            const element = elements[key]
            //给元素添加change事件
            element.onchange = function () {
                const value = element.value
                //根据字段拿到正则
                const reg = ctx.formOpt.fields[key].reg
                //验证是否符号正则规范
                const testRes = reg.test(value)
                if (testRes) {
                    //该字段验证通过
                    ctx.valiRes[key] = true
                    delete ctx.errMsg[key]
                    element.classList.add('success')
                    element.classList.remove('error')
                } else {
                    //该字段验证不通过
                    ctx.valiRes[key] = false
                    ctx.errMsg[key] = ctx.formOpt.fields[key].errMsg
                    element.classList.remove('success')
                    element.classList.add('error')
                }
                // handleFieldErro(key)
            }
        }
    }
    /**/
    this.isPass = function () {
        const valiRes = this.valiRes
        // console.log('ispass is calling')
        // console.log(valiRes)
        for (let key in valiRes) {
            const isFieldPass = valiRes[key]
            if (!isFieldPass) {
                return false
            }
        }
        return true
    }

    function handleFieldErro(filed) {
        const element = ctx.elements[filed]
        if (filed in ctx.errMsg) {
            element.classList.remove('success')
            element.classList.add('error')
        } else {
            element.classList.remove('error')
            element.classList.add('success')
        }
    }

}

const form = new Form(formOpt)
const submitBtn = document.getElementById('submit')
submitBtn.addEventListener('click', function (e) {
    const isFormPass = form.isPass()
    if (!isFormPass) {
        e.preventDefault()
        console.log('表单未通过')
    }
})